<template>
  <view style="padding-bottom: 200rpx;">
    <view class="">
      <view class="top_fixd">
        <image v-show="obj.status_name == '待付款'" class="img" src="/static/lzl/deltas_wei@2x.png" mode=""></image>
        <image v-show="obj.status_name == '待发货' || obj.status_name == '待收货'" class="img" src="/static/lzl/fahuo@2x.png" mode=""></image>
        <view class="dengdai">
          <view v-show="obj.status_name == '待付款'" class="">等待付款</view>
          <view v-show="obj.status_name == '待发货'" class="">等待买家发货</view>
          <view v-show="obj.status_name == '待收货'" class="">商品已送达 请及时收货</view>
          <!--      <view class="">等待付款</view>
        <view class="">等待付款</view> -->
          <!-- <view v-show="obj.status_name == '待付款'" class="">还剩时间：53分钟16秒</view> -->
          <view v-show="obj.status_name == '待付款'" class="">
            <u-count-down
              :show-hours="false"
              bg-color="none"
              color="#fff"
              separator-color="#fff"
              font-size="32"
              @change="changeFn"
              separator="zh"
              :timestamp="timestamp"
            ></u-count-down>
          </view>
        </view>
      </view>
      <!-- 姓名地址这块 -->
      <view class="" style="padding: 0 32rpx;">
        <view class="addess">
          <image src="/static/lzl/icon_order_address@2x.png" style="width: 50rpx;height: 48rpx;margin-right: 20rpx;" mode=""></image>
          <view class="addess_name">
            <view class="name">{{ obj.consignee }} {{ obj.phone }}</view>
            <view class="address">{{ obj.province_name }}{{ obj.city_name }}{{ obj.area_name }}{{ obj.address }}</view>
          </view>
        </view>
      </view>
      <!-- 商品详情 -->
      <view style="padding: 0 32rpx;">
        <view class="shoop">
          <view class="shoop_tit">商品详情</view>
          <view v-for="(ite, ind) in obj.item" :key="ind">
            <view class="picture">
              <view class="" style="margin-right: 30rpx;"><image :src="ite.goods_image" style="width: 200rpx;height: 200rpx;" mode=""></image></view>
              <view class="" style="width: 350rpx;">
                <view class="picture_top">{{ ite.goods_title }}</view>
                <view class="picture_top_t">{{ ite.goods_sku[1] }}</view>
                <view class="picture_bottom_b">{{ ite.colorName }}</view>
                <view class="picture_bottom">￥{{ ite.pay_price }}</view>
              </view>
              <!--  -->
              <view class="num">× {{ ite.goods_num }}</view>
            </view>

            <view class="btn" v-show="ite.status_name == '售后中'"><view class="left" @click="afterSales(ite)" v-show="true">售后详情</view></view>
            <!-- <view class="btn" v-show="ite.status_name == '待收货'"><view class="left" @click="tuikuan(ite)" v-show="true">确认收货</view></view> -->
            <view class="btn" v-show="ite.status_name == '待发货' || ite.status_name == '待付款' || ite.status_name == '待收货'">
              <view class="left" @click="tuikuan(ite)" v-show="true">申请退款</view>
              <view class="left1" v-show="ite.status_name == '待收货'" @click.stop="shouhuo(ite)">确认收货</view>
            </view>
          </view>
        </view>
      </view>
      <!--总价钱 -->
      <view style="padding: 0 32rpx;">
        <view class="moery">
          <view class="" style="margin-bottom: 35rpx; display: flex;font-size: 28rpx;color: #AAAAAA;justify-content: space-between;">
            <view class="">商品金额</view>
            <view class="" style="color: #001B0A;">￥{{ obj.goods_amount }}</view>
          </view>
          <view class="" style="margin-bottom: 35rpx; display: flex;font-size: 28rpx;color: #AAAAAA;justify-content: space-between;">
            <view class="">商品优惠</view>
            <view class="">￥{{ obj.discount_fee }}</view>
          </view>
          <view
            class=""
            style="border-bottom: 2rpx solid  #EEEEEE; padding-bottom: 35rpx;margin-bottom: 35rpx; display: flex;font-size: 28rpx;color: #AAAAAA;justify-content: space-between;"
          >
            <view class="">运费</view>
            <view class="">￥{{ obj.dispatch_amount }}</view>
          </view>
          <view class="" style=" display: flex;font-size: 28rpx;color: #AAAAAA;justify-content: space-between;">
            <view class="" style="color: #001B0A;">实付款</view>
            <view class="" style="display: flex;justify-content: center;color: #ff0000;">
              ￥
              <text class="" style="font-size: 32rpx;color: #ff0000;font-weight: 600;">{{ obj.total_fee }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 单号 -->
      <view style="padding: 0 32rpx;">
        <view class="orderHao" style="font-size: 28rpx;color: #AAAAAA;">
          <view class="">订单编号：{{ obj.order_sn }}</view>
          <view class="" style="margin: 35rpx 0;">下单时间：{{ $u.timeFormat(obj.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
          <view class="">配送方式：物流快递</view>
        </view>
      </view>
    </view>
    <!-- 下面的取消订单 -->
    <view class="botton">
      <view @click="tixing" v-show="obj.status_name == '待发货' && obj.item[0].status_name != '售后中'" class="btn_leftF">提醒发货</view>
      <view v-show="obj.status_name == '待付款'" @click.stop="cancellationOrder(obj.item[0])" class="btn_left">取消订单</view>
      <view v-show="obj.status_name == '待付款'" @click.stop="jixu(item)" class="btn_right">确认付款</view>
      <!-- <view v-show="obj.status_name == '待收货'" class="btn_left">申请售后</view> -->
      <!-- <view v-show="obj.status_name == '待收货'" @click="shouhuo" class="btn_right">确认收货</view> -->
    </view>
  </view>
</template>

<script>
import { orderDetail, cancel } from '@/api/api.js';
export default {
  data() {
    return {
      id: '',
      obj: {},
      baseUrl: this.$baseUrl,
      timestamp: ''
    };
  },

  onLoad(options) {
    this.id = options.id;
    this.init();
    // console.log(this.id);
  },
  methods: {
    changeFn() {
      var tmp = Date.parse(new Date()).toString();
      tmp = tmp.substr(0, 10);
      this.timestamp = `${this.obj.ext_arr.expired_time}` - tmp;
    },
    // 点击取消订单
    async cancellationOrder(item) {
      console.log(item, '000000000000000000000000000');
      let n = await uni.showModal({
        title: '提示',
        content: '确认取消订单吗？'
      });
      if (n[1].cancel) return;
      if (n[1].confirm) {
        let n = await cancel({ id: item.id });
        uni.navigateBack();
        setTimeout(() => {
          this.$msg(n.msg);
        }, 1000);
      }
    },
    async jixu(item) {
      // 微信支付
      let res = await this.$api.prepay({
        order_sn: this.obj.order_sn,
        payment: 'wechat'
        // return_url: '/pages/payResult/payResult'
      });
      if (res.code == 1) {
        wx.requestPayment({
          //成功之后，调用小程序微信支付
          timeStamp: res.data.pay_data.timeStamp,
          nonceStr: res.data.pay_data.nonceStr,
          package: res.data.pay_data.package,
          signType: 'MD5',
          paySign: res.data.pay_data.paySign,
          success: res => {
            //支付成功的回调
            // console.log('支付成功', JSON.stringify(res));
            // this.show = true;
            uni.navigateTo({
              url: '/pages/payResult/payResult'
            });
          },
          fail: () => {
            // uni.showToast({
            //   icon: 'none',
            //   title: '支付失败'
            // });
          }
        });
      }
    },
    // 点击确认收货
    async shouhuo(ite) {
      console.log(ite);
      let n = await this.$api.confirm({ id: ite.order_id, order_item_id: ite.id });
      if (n.code == 1) {
        this.$msg('收货成功');
      }
    },
    // 提醒发货
    tixing() {
      setTimeout(() => {
        this.$msg('已经提醒卖家发货');
      }, 500);
    },
    async init() {
      let n = await orderDetail({ id: this.id });
      this.obj = n.data;
      this.obj.item.forEach(ite => {
        let color = ite.goods_sku_text.split('#');
        let col = '#' + color[1];
        ite.color = col;
        ite.colorName = color[0];
      });
      if (n.data.ext_arr) {
        let tmp = Date.parse(new Date()).toString();
        tmp = tmp.substr(0, 10);
        this.timestamp = `${n.data.ext_arr.expired_time}` - tmp;
        console.log(tmp, '0000000000000000000000000000000');
      }
    },
    // 点击售后详情
    afterSales(item) {
      uni.navigateTo({
        url: '/pages/my/orderList/refundDetails/refundDetails?id=' + item.ext_arr.aftersale_id
      });
    },
    // 点击退款
    tuikuan(item) {
      uni.navigateTo({
        url: `/pages/my/orderList/tuikuanRefund/tuikuanRefund?id=${item.order_id}&order_item_id=${item.id}`
      });
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.botton {
  position: fixed;
  width: 100%;
  height: 100rpx;
  left: 0;
  bottom: 0;
  background-color: #fff;
  .btn_left {
    position: absolute;
    width: 176rpx;
    right: 350rpx;
    top: 20rpx;
    line-height: 64rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #aaaaaa;
    height: 64rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    border: 2rpx solid #eeeeee;
  }
  .btn_leftF {
    position: absolute;
    width: 176rpx;
    right: 50rpx;
    top: 20rpx;
    line-height: 64rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #aaaaaa;
    height: 64rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    border: 2rpx solid #eeeeee;
  }
  .btn_right {
    position: absolute;
    width: 306rpx;
    right: 20rpx;
    top: 20rpx;
    line-height: 64rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    background-color: #ff0000;

    height: 64rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    border: 2rpx solid #eeeeee;
  }
}
.orderHao {
  padding: 32rpx;
  margin-top: 20rpx;
  background-color: #fff;
}
.moery {
  padding: 32rpx;
  margin-top: 20rpx;
  background-color: #fff;
}
.shoop {
  padding: 32rpx;
  margin-top: 20rpx;
  background-color: #fff;
  .shoop_tit {
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #001b0a;
  }
}
.addess {
  display: flex;
  // width: 686rpx;
  align-items: center;
  padding: 32rpx;
  // border-radius: 20rpx;
  // z-index: 999;
  // height: 500rpx;
  background-color: #fff;

  margin-top: 150rpx;
  .name {
    font-size: 32rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #0a0a09;
  }
  .address {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
}
page {
  background-color: #f1f1f1;
}
.btn {
  position: relative;
  // text-align: right;
  height: 100rpx;
  margin-top: 40rpx;
  .left {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #adadaa;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #adadaa;
  }
  .left1 {
    position: absolute;
    right: 200rpx;
    top: 0rpx;
    width: 192rpx;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border: 2rpx solid #adadaa;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #adadaa;
  }
}
.top_fixd {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 260rpx;
  background: #c3b27f;
  border-radius: 0 0 30% 30%;
  .dengdai {
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .img {
    position: absolute;
    right: 32rpx;
    bottom: 20rpx;
    width: 200rpx;
    height: 200rpx;
  }
}
.picture {
  margin-top: 36rpx;
  position: relative;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f2f1f1;
  .picture_top {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #0a0a09;
  }
  .picture_top_t {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom_b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 10rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5a55;
  }
  .picture_bottom {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #e83241;
  }
  .num {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #cccccc;
  }
}
</style>
